<div class="pac-indicator-market__drawer max-w-full w-full sm:w-[400px] h-full relative flex flex-col justify-start items-stretch">
  <div class="pac-indicator-market_-toolbar flex justify-between items-center">
    <input matInput class="pac-indicator-market__date-picker font-semibold text-base outline-none bg-transparent focus:rounded-lg focus:bg-gray-500 focus:bg-opacity-25"
      [matDatepicker]="picker"
      [matDatepickerFilter]="prevDatesFilter"
      [formControl]="dateControl"
      (click)="picker.open()"
    >
    <mat-datepicker #picker
      startView="multi-year"
      (yearSelected)="chosenYearHandler($event, picker)"
      (monthSelected)="chosenMonthHandler($event, picker)"
      >
    </mat-datepicker>
  
    <div class="flex justify-end items-center">
      <div class="pac-indicator__tag px-2 rounded-lg uppercase cursor-pointer bg-gray-100 hover:bg-gray-200" (click)="toggleTag($event)">
        {{ 'IndicatorApp.TagEnum.' + tagType() | translate: {Default: IndicatorTagEnum[tagType()]} }}
      </div>

      <button mat-icon-button
        [cdkMenuTriggerFor]="options"
        (click)="$event.stopPropagation();$event.preventDefault();"
      >
        <mat-icon>more_horiz</mat-icon>
      </button>
    </div>

  </div>

  <cdk-virtual-scroll-viewport itemSize="70" [minBufferPx]="10 * 70" [maxBufferPx]="20 * 70" class="pac-indicator-market__infinite-container flex-1">

    <div class="w-full flex mb-2">
      <div class="pac-indicator-market__search-input flex items-center flex-1 p-1 space-x-4 rounded-lg bg-gray-300 bg-opacity-25 dark:bg-opacity-10">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        <input #searchInput class="outline-none bg-transparent flex-1" type="text" [placeholder]=" ('IndicatorApp.IndicatorNameOrCode' | translate: {Default: 'Indicator name or code'})+'...'"
          (keyup)="onSearch($event)"
          (focus)="onSearchFocus($event)"
        >
      </div>

      <button mat-button class="pac-indicator-market__search-done rounded-lg"
        (click)="onSearchDone()">
        {{ 'IndicatorApp.Done' | translate: {Default: 'Done'} }}
      </button>
    </div>

    <mat-list class="pac-indicator-list" cdkDropList (cdkDropListDropped)="dropOrder($event)">
      <ng-container *cdkVirtualFor="let item of indicators$ | async; trackBy: trackById; templateCacheSize: 0">
        <mat-list-item matRipple [class.selected]="selected$() === item.id"
          (click)="click(item)"
          cdkDrag [cdkDragStartDelay]="200"
          >

          <ngm-indicator [dataSettings]="item.dataSettings" [indicatorCode]="item.code" [lookBack]="lookBack()" 
            [tagType]="tagType()"
            (toggleTag)="toggleTag()"
          />

          <!-- <pac-indicator-item class="flex-1 overflow-hidden" [indicator]="item" [tag]="tagType()"/> -->
          <div class="pac-indicator__placeholder" *cdkDragPlaceholder></div>
        </mat-list-item>
        <mat-divider></mat-divider>
      </ng-container>
    </mat-list>
  </cdk-virtual-scroll-viewport>

  @if (isEmpty()) {
    <div class="pac-indicator-market__empty">
      <div class="signal font-notoColorEmoji">🛒</div>
      <span>{{ 'IndicatorApp.Empty' | translate: {Default: 'Empty'} }}, 
        {{ 'IndicatorApp.Goto' | translate: {Default: 'Please go to'} }}
        <a class="underline" [routerLink]="['/indicator/market']" >{{ 'IndicatorApp.IndicatorMarket' | translate: {Default: 'Indicator Market'} }}</a>
        {{ 'IndicatorApp.ApplyIndicatorPermission' | translate: {Default: 'apply indicator permission'} }}
      </span>
    </div>
  }
</div>

@if (notMobile$ | async) {
  @for (id of currentIndicatorIds$(); track id) {
    <pac-indicator-detail #indicatorDetail [id]="id" [desktop]="true"/>
  }
}

<ng-template #options>
  <div cdkMenu class="cdk-menu__medium pac-indicator-app__options flex flex-col gap-2">
    <label>{{ 'IndicatorApp.TimeGranularity' | translate: {Default: 'Time Granularity'} }}</label>
    <mat-button-toggle-group ngmAppearance="hero" color="accent" displayDensity="cosy"
      [ngModel]="timeGranularity()" (ngModelChange)="onTimeGranularity($event)" (click)="$event.stopPropagation()">
      <mat-button-toggle [value]="TIME_GRANULARITY.Year">
        {{ 'COMPONENTS.DATE_PICKER.Year' | translate: {Default: 'Year'} }}
      </mat-button-toggle>
      <mat-button-toggle [value]="TIME_GRANULARITY.Quarter">
        {{ 'COMPONENTS.DATE_PICKER.Quarter' | translate: {Default: 'Quarter'} }}
      </mat-button-toggle>
      <mat-button-toggle [value]="TIME_GRANULARITY.Month">
        {{ 'COMPONENTS.DATE_PICKER.Month' | translate: {Default: 'Month'} }}
      </mat-button-toggle>
      <mat-button-toggle [value]="TIME_GRANULARITY.Day">
        {{ 'COMPONENTS.DATE_PICKER.Day' | translate: {Default: 'Day'} }}
      </mat-button-toggle>
    </mat-button-toggle-group>

    <mat-divider></mat-divider>

    <label>{{ 'IndicatorApp.LookbackPeriods' | translate: {Default: 'Lookback Periods'} }}</label>
    <mat-slider class="w-full" discrete color="accent"
      step="1"
      min="0"
      [max]="lookbackLimit()"
      (click)="$event.stopPropagation()"
    >
      <input matSliderThumb [ngModel]="lookBack()" (valueChange)="onLookback($event)">
    </mat-slider>

    <mat-divider></mat-divider>

    <button cdkMenuItem mat-button disableRipple (click)="refresh()">
      <mat-icon>refresh</mat-icon>
      <span>
        {{ 'IndicatorApp.Refresh' | translate: {Default: 'Refresh'} }}
      </span>
    </button>
  </div>
</ng-template>
